/* 登录公共样式 */

// .content {
//   position: relative;
//   width: 100vw;
//   height: 100vh;
// }
.login_box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 894px;
  height: 500px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  box-shadow: 0px 0px 5px #777;
  .login_left {
    padding: 20px;
    width: 420px;
    height: 500px;
    position: relative;
    background: linear-gradient(-45deg, #fa4e4e, #fd894f);
    box-sizing: border-box;

    .bg_logo {
      margin: 0 auto;
      text-align: center;
      width: 200px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
      color: #ffffff;
      p {
        font-size: 18px;
        font-weight: 400;
        color: #ffffff;
        line-height: 25px;
        letter-spacing: 6px;
        text-align: center;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }

    .closeBtn:hover {
      transform: rotate(1turn);
    }

    .closeBtn {
      z-index: 3;
      position: absolute;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      right: 0;
      top: 24px;
      left: 24px;
      background: url('@/assets/images/login_remove.png') 50% no-repeat;
      cursor: pointer;
      transition: all 0.5s ease;
      transform: rotate(0deg);
    }
  }

  .login_right {
    position: relative;
    width: 475px;
    height: 500px;
    background: url('@/assets/images/ybbg.jpg') no-repeat center center;

    .login_form {
      padding: 10px 32px;
      width: 350px;
      height: 440px;
      background: #ffffff;
      box-shadow: 0 0 8px #cccccc;
      border-radius: 8px;
      position: absolute;
      box-sizing: border-box;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      .nav_tabs {
        display: flex;
        justify-content: space-between;
        text-align: center;

        .actives {
          color: #388eff;
          border-bottom: 4px solid #388eff;
        }

        li {
          width: 40%;
          padding: 0px 0;
          font-size: 17px;
          cursor: pointer;
          font-weight: bold;

          span {
            color: #333;
            display: block;
            height: 45px;
            line-height: 45px;
          }
        }
      }

      .tab_main {
        height: 360px;

        .login_texts {
          width: 100%;
          margin-top: 10px;
          color: #666;
          text-align: justify;

          span {
            color: #333333;
            text-decoration: none;
            cursor: pointer;

            &:hover {
              color: #007bff;
              text-decoration: none;
            }
          }
        }

        .demo_ruleForm {
          padding-top: 28px;

          .captcha_t {
            ::v-deep {
              .el-form-item__content {
                display: flex;
                align-items: center;
                justify-content: space-between;
              }

              .el-button--small.is-round {
                padding: 11px 15px;
              }
            }
          }

          ::v-deep {
            .el-button.is-disabled,
            .el-button.is-disabled:hover {
              cursor: auto;
            }
          }

          .verification {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .input_psd {
              flex: 4;
              margin-right: 12px;
            }
            .img_code {
              flex: 2;

              img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
                cursor: pointer;
              }
            }
          }
        }
      }
    }
  }
}
